<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>体验canvas绘图</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<!-- 1.准备画布 -->
<!-- 1.1 画布时是白色 而且默认300*150 -->
<!-- 1.2 设置画布的大小 width='600' height="400" -->
<canvas width="600" height="400"></canvas>
<div id="main"></div>
<div class="asd"></div>
<!-- 2.准备绘制工具 -->
<!-- 3.利用工具绘图 -->
<script type="text/javascript">
// 1.获取元素
var myCanvas = document.querySelector('canvas');
// 2.获取上下文，绘制工具箱(web gl 绘制3d效果的网页技术)
var ctx = myCanvas.getContext('2d');
// 3.移动画笔
ctx.moveTo(100,100.5);
// 4.绘制直线（轨迹，绘制路径）
ctx.lineTo(200,100.5);

// 6.平行线
ctx.moveTo(100,200);
ctx.lineTo(200,200);

// 5.描边
ctx.stroke();

// 关于线条的问题
// 1.默认的宽度是多少 1px
// 2.默认的颜色是什么 黑色
// 产生原因： 对齐的点是线的中心位置，会把线分成两个0.5px，0.5px浏览器会默认当作1px显示， 显示的是不饱和增加宽度
// 解决方案：前后移动0.5px
</script>
</body>
</html>